<template>
  <el-drawer
      :title="title"
      v-model="visible"
      size="60%"
      direction="rtl"
      :with-header="true"
  >
    <el-card class="box-shadow">
      <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          :inline="true"
          label-width="200px"
      >
        <el-form-item label="任务指派人" prop="takeUserId">
<!--          :root-id="423190258"-->
          <cascader-user v-model="form.takeUserId" :disabled="formType==='take'"  />
        </el-form-item>
        <!-- 预计完成时间 -->
        <el-form-item label="预计完成时间" prop="takeEndDatetime">
          <el-date-picker
              clearable
              v-model="form.takeEndDatetime"
              type="datetime"
              value-format="x"
              placeholder="请选择预计处理完成时间"
          />

        </el-form-item>

        <!-- 当前已接工单数量 -->
        <el-form-item label="当前已接工单数量" prop="waitNum">
          {{ waitNum }}
        </el-form-item>

        <el-divider/>

        <!-- 接单内容描述 -->
        <el-descriptions class="margin-top" title="接单内容" :column="4" border>
          <el-descriptions-item label="派单人员">
            {{ form.sendUserId_dictText }}
          </el-descriptions-item>
          <el-descriptions-item label="派单时间">
            {{ formatDate(form.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="工单类型">
            {{ form.type }}
          </el-descriptions-item>
          <el-descriptions-item label="产品名称">
            {{ form.productName }}
          </el-descriptions-item>
          <el-descriptions-item label="产品编码">
            {{ form.productCode }}
          </el-descriptions-item>
          <el-descriptions-item label="优先级">
            <dict-tag :type="DICT_TYPE.BUSINESS_PRIORITY" :value="form.priority||''"/>
          </el-descriptions-item>
          <el-descriptions-item label="要求处理时间">
            {{ formatDate(form.sendEndDatetime) }}
          </el-descriptions-item>
          <el-descriptions-item label="产品描述">
            <div v-html="form.demandDesc"></div>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </el-card>

    <!-- 底部按钮 -->
    <div class="drawer-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-drawer>
</template>

<script setup>
// 1. 引入依赖
import {reactive, ref} from 'vue';
import {ElForm, ElMessage} from 'element-plus';


import {useUserStore} from "@/store/modules/user";
import {VisualOrderApi} from "@/api/business/design/visual";
import {DICT_TYPE} from '@/utils/dict'
import {formatDate} from "@/utils/formatTime";

const userStore = useUserStore()
const message = useMessage()
// 2. 初始化响应式状态
// 抽屉显示状态
const visible = ref(false);
// 表单引用（用于验证）
const formRef = ref();
// 已接工单数量
const waitNum = ref(0);
const title = ref('');
const formType = ref('')

// 表单数据
const form = ref({
  takeEndDatetime: '', // 预计完成时间（必填）
  // 以下字段从外部传入（row数据）
  createTime: '', // 派单时间
  productCode: '', // 产品编码
  productName: '', // 产品名称
  sendUserId_dictText: '', // 派单人员
  type: '', // 工单类型
  priority: '', // 优先级
  sendEndDatetime: '', // 要求处理时间
  demandDesc: '', // 产品描述
  takeUserId: ''
});

// 表单验证规则
const rules = reactive({
  // takeEndDatetime: [
  //   {required: true, message: '请选择预计处理完成时间', trigger: 'blur'}
  // ],
  takeUserId: [
    {required: true, message: '请选择接单人员', trigger: 'blur'}
  ]
});


watch(
    () => form.value.takeUserId,
    // 1. 将回调函数声明为 async 函数，才能使用 await
    async (newVal, oldVal) => {
      // 2. 处理空值：避免 newVal 为空时请求接口（可选，根据业务需求）
      if (!newVal) {
        waitNum.value = 0; // 空值时重置已接工单数量
        return;
      }
      // 3. 构造查询参数并请求接口
      const queryParams = {
        takeUserId: newVal,
        state: 'going',
        pageSize: 100
      };

      try {
        // 使用 await 必须在 async 函数中
        const data = await VisualOrderApi.getVisualOrderPage(queryParams);
        waitNum.value = data.total || 0; // 赋值已接工单总数
      } catch (error) {
        // 4. 增加错误处理：避免接口失败导致的页面异常
        console.error('获取工单数量失败：', error);
        waitNum.value = 0; // 失败时重置，避免显示错误数据
        ElMessage.error('获取工单数量失败，请重试'); // 提示用户
      }
    },
    {
      deep: true,
      // 5. 根据需求设置 immediate：若初始需要执行则设为 true
      immediate: false // 例如：页面加载时若 takeUserId 已有值，是否执行一次
    }
);


// 4. 核心方法
/**
 * 显示抽屉并初始化数据
 * @param {Object} row - 外部传入的工单数据
 */
const showVisible = (type, row) => {
  form.value = row
  visible.value = true;
  formType.value = type
  waitNum.value = 0
  if (formType.value === 'take') {
    title.value = '接单'
    form.value.takeUserId = userStore.user.id.toString()
  } else {
    title.value = '指派'
  }
  // 默认将“要求处理时间”设为“预计完成时间”
  form.value.takeEndDatetime = row.sendEndDatetime || null;
  // 获取当前已接工单数量
  getWaitNum();
};


/**
 * 获取当前用户已接的工单数量（状态为“进行中”）
 */
const getWaitNum = async () => {
  try {
    const queryParams = {
      state: 'going', // 工单状态：进行中
      pageSize: 100
    };
    // 2. 根据 formType 赋值 takeUserId（修复语法+增加判空）
    if (formType.value === 'take') {
      // 判空：避免 userStore.user 未初始化导致的报错
      queryParams.takeUserId = userStore?.user?.id || '';
    } else {
      // 若 form.value.takeUserId 可能不存在，也可增加判空（根据业务需求）
      queryParams.takeUserId = form.value.takeUserId || '';
    }
    if (!queryParams.takeUserId) return
    const data = await VisualOrderApi.getVisualOrderPage(queryParams)
    // 赋值已接工单总数（假设接口返回res.total为总数）
    waitNum.value = data.total || 0;
  } catch (error) {

    message.error('获取已接工单数量失败，请重试');
  }
};

/**
 * 提交表单（接单操作）
 */
const submitForm = async () => {
  await formRef.value.validate()
  form.value.takeType=formType.value
  await VisualOrderApi.takeVisualInfo(form.value)
  message.success('接单成功');
  visible.value = false;
  emit('success');
}


defineExpose({showVisible}) // 提供 open 方法，用于打开弹窗
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
</script>

<style scoped>
/* 抽屉底部按钮样式 */
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  gap: 8px; /* 按钮间距 */
}

/* 描述列表顶部间距 */
.margin-top {
  margin-top: 16px;
}

/* 卡片阴影优化（可选） */
.box-shadow {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}
</style>
